<template>
  <el-descriptions
    :title="title"
    :colon="colon"
    :labelClassName="labelClassName"
    :contentClassName="contentClassName"
    :labelStyle="labelStyle"
    :contentStyle="contentStyle"
    :size="size"
    :direction="direction"
    :column="column"
    :border="border"
  >
    <!-- extra slot 操作区文本，显示在右上方 -->
    <template slot="extra" v-if="extra">
      <slot name="extra"></slot>
    </template>
    <el-descriptions-item
      v-for="(item, index) in titleData || keyData"
      :key="index"
      :span="item.span || 1"
      :contentStyle="item.contentStyle"
      :labelClassName="item.labelClassName"
      :contentClassName="item.contentClassName"
      :labelStyle="item.labelStyle"
      :label="item.label"
    >
      <!-- 插槽 -->
      <template v-if="item.type === 'slot'">
        <slot :data="{ data, item }" :name="item.prop"></slot>
      </template>
      <!-- el-link 组件 -->
      <template v-else-if="item.type === 'link'">
        <el-link
          :type="item.config.type || 'primary'"
          :underline="item.config.underline"
          :disabled="item.config.disabled"
          :href="item.config.href"
          :icon="item.config.icon"
          @click="item.config.click && item.config.click(data)"
          >{{ data[item.prop] }}</el-link
        >
      </template>
      <!-- 类型是text或者textarea  -->
      <template v-else-if="inputType.includes(item.type)">
        <el-input
          :show-word-limit="item.showWrodLimit"
          :type="item.type"
          :maxlength="item.maxlength || 150"
          :minlength="item.minlength"
          :clearable="item.clearable || true"
          :show-password="item.showPassword"
          :prefix-icon="item.prefixicon"
          :suffix-icon="item.suffixIcon"
          :rows="item.rows"
          :autosize="item.autosize"
          :autocomplete="item.autocomplete"
          :name="item.name"
          :max="item.max"
          :min="item.min"
          :step="item.step"
          :resize="item.resize"
          :autofocus="item.autofocus"
          :form="item.form"
          :label="item.label"
          :tabindex="item.tabindex"
          :validate-event="item.validateEvent"
          :disabled="item.disabled || false"
          :placeholder="item.placeholder || `请输入${item.label}`"
          v-model="data[item.prop || item.field]"
          @focus="item.focus && item.focus($event)"
          @blur="item.blur && item.blur($event)"
          @clear="item.clear && item.clear($event)"
          @change="item.change && item.change($event)"
          @input="item.input && item.input($event)"
        ></el-input>
      </template>
      <!-- 下拉框 -->
      <template v-else-if="selectType.includes(item.type)">
        <el-select
          v-model="data[item.prop || item.field]"
          default-first-option
          :clearable="item.clearable || true"
          :disabled="item.disabled || false"
          :remote="item.remote"
          :loading="loadingProp[item.prop || item.field]"
          :allow-create="item.allowCreate"
          :multiple="item.multiple"
          :filterable="item.filterable"
          @visible-change="item.visibleChange && item.visibleChange($event)"
          @remove-tag="item.removeTag && item.removeTag($event)"
          @clear="item.clear && item.clear($event)"
          @blur="item.blur && item.blur($event)"
          @focus="item.focus && item.focus($event)"
          @change="item.change && item.change($event)"
          :remote-method="
            item.remoteMethod ||
              ((query) => {
                remoteMethod(query, item.prop);
              })
          "
          :placeholder="item.placeholder || `请选择${item.label}`"
        >
          <el-option
            v-for="(oItem, okey) in item.option || item.options || item.optionData || optionData[item.prop] || []"
            :key="okey"
            :label="(item.optionProps && oItem[item.optionProps.label]) || oItem.label"
            :value="(item.optionProps && oItem[item.optionProps.value]) || oItem.value"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 默认 -->
      <template v-else>
        {{ (item.formatter && item.formatter(data)) || data[item.field || item.prop] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: "secDesc",
  props: {
    size: String,
    title: String,
    colon: Boolean,
    direction: String,
    column: {
      type: Number,
      default: 3,
    },
    extra: Boolean,
    labelClassName: String,
    contentClassName: String,
    labelStyle: Object,
    contentStyle: Object,
    border: {
      type: Boolean,
      default: true,
    },
    loadingProp: {
      type: Object,
      default: () => {
        return {};
      },
    },
    data: Object,
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    titleData: Array,
    keyData: Array,
  },
  components: {},
  data() {
    return {
      selectType: ["select", "option"],
      inputType: ["text", "textarea"], //input 输入框组件 类型
    };
  },
  computed: {},
  mounted() {},
  methods: {
    /**
     * @函数功能:远程搜索
     * @参数输入:query:string 输入的值 prop:string 字段名
     * @函数返回:
     */
    remoteMethod(query, prop) {
      console.log(query, prop);
      this.$emit("remoteMethod", { query, prop });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.el-descriptions {
  margin-bottom: 20px;
}
</style>
